<template>
	<view class="bg">
		<u-select v-model="mytzShow" :list="yearArr" mode="single-column" :default-value="[yearArr.length]"
			@confirm="mytzConfirm"></u-select>
		<view v-show="current === 0">
			<view class="sub_title">项目分析</view>
			<view class="home_one">
				<view class="flex">
					<view class="flex1">
						<view class="top_font">{{ homeObj.itemTotal }}</view>
						<image src="../../static/images/ZDXM/home/icon1.png" mode=""></image>
						<view class="bottom_font">项目总数(项)</view>
					</view>
					<view class="flex1">
						<view class="top_font">{{ homeObj.planInvTotal }}</view>
						<image src="../../static/images/ZDXM/home/icon2.png" mode=""></image>
						<view class="bottom_font">计划投资(万元)</view>
					</view>
					<view class="flex1">
						<view class="top_font">{{ homeObj.factInvTotal }}</view>
						<image src="../../static/images/ZDXM/home/icon3.png" mode=""></image>
						<view class="bottom_font">实际投资(万元)</view>
					</view>
				</view>
				<view class="title">项目阶段占比情况</view>
				<view class="charts-box">
					<qiun-data-charts type="pie" :chartData="chartsDataColumn1" :eopts="eoptsPie" :echartsH5="true"
						:echartsApp="true" tooltipFormat="tooltipDemo1" />
					<view class="right_div">
						<view class="right_one" v-for="(item, index) in chartsDataColumn1.series[0].data" :key="index">
							<view class="round"></view>
							<view class="name">{{ item.name }}</view>
							<view class="value">{{ item.value }}</view>
							<view class="value">项</view>
						</view>
					</view>
				</view>
				<view class="title_flex">
					<view class="title">每月投资趋势图</view>
					<view class="title_right" @click="showPicker(1)">
						<view class="yearFont">{{ mytzYear }}年</view>
						<u-icon name="arrow-down-fill" color="rgba(48, 116, 255, 1)" size="18"></u-icon>
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :chartData="chartsDataColumn2" :eopts="eoptsTest2" :echartsH5="true"
						:echartsApp="true" />
				</view>
			</view>
			<view class="sub_title">节点分析</view>
			<view class="home_one">
				<view class="flex">
					<view class="flex11">
						<view class="left_view">
							<image src="../../static/images/ZDXM/home/left_icon.png" mode=""></image>
						</view>
						<view class="right_view">
							<view class="name">总数</view>
							<view class="value">{{ homeObj.nodeTotal }}</view>
						</view>
					</view>
					<view class="flex11">
						<view class="left_view">
							<image src="../../static/images/ZDXM/home/right_icon.png" mode=""></image>
						</view>
						<view class="right_view">
							<view class="name">完成数</view>
							<view class="value">{{ homeObj.nodeFinish }}</view>
						</view>
					</view>
				</view>
				<view class="title_flex">
					<view class="title">每月立项和完成情况</view>
					<view class="title_right" @click="showPicker(2)">
						<view class="yearFont">{{ lxwcYear }}年</view>
						<u-icon name="arrow-down-fill" color="rgba(48, 116, 255, 1)" size="18"></u-icon>
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :chartData="chartsDataColumn3" :echartsH5="true"
						:echartsApp="true" />
				</view>
				<view class="title">节点完成时间</view>
				<view class="flex">
					<view class="flex11">
						<view class="center_view">
							<view class="value">{{ homeObj.nodeTotalTime }}天</view>
							<view class="name">节点完成时间</view>
						</view>
					</view>
					<view class="flex11">
						<view class="center_view">
							<view class="value">{{ homeObj.nodeLongTime }}天</view>
							<view class="name">最长完成时间</view>
						</view>
					</view>
					<view class="flex11">
						<view class="center_view">
							<view class="value">{{ homeObj.nodeShortTime }}天</view>
							<view class="name">最短完成时间</view>
						</view>
					</view>
				</view>
			</view>
			<view class="sub_title">征地拆迁</view>
			<view class="home_one">
				<view class="title_flex">
					<view class="title">项目进度情况走势图</view>
					<!-- <view class="title_right" @click="showPicker(3)">
						<view class="yearFont">{{xmjdYear}}年</view>
						<u-icon name="arrow-down-fill" color='rgba(48, 116, 255, 1)' size='10'></u-icon>
					</view> -->
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :chartData="chartsDataColumn4" :echartsH5="true" :echartsApp="true" />
				</view>
				<view class="title_flex">
					<view class="title">每月征地与拆迁面积走势图</view>
					<view class="title_right" @click="showPicker(3)">
						<view class="yearFont">{{ zdcqYear }}年</view>
						<u-icon name="arrow-down-fill" color="rgba(48, 116, 255, 1)" size="18"></u-icon>
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :eopts="eoptsTest1" :chartData="chartsDataColumn5" :echartsH5="true"
						:echartsApp="true" />
				</view>
			</view>
			<view class="sub_title">督查协调</view>
			<view class="home_one">
				<view class="title_flex">
					<view class="title">每月督查任务生成数与完成数</view>
					<view class="title_right" @click="showPicker(4)">
						<view class="yearFont">{{ mydcYear }}年</view>
						<u-icon name="arrow-down-fill" color="rgba(48, 116, 255, 1)" size="18"></u-icon>
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :eopts="eoptsTest" :chartData="chartsDataColumn6" :echartsH5="true"
						:echartsApp="true" />
				</view>
				<view class="title_flex">
					<view class="title">每月协调任务生成数与完成数</view>
					<view class="title_right" @click="showPicker(5)">
						<view class="yearFont">{{ myxtYear }}年</view>
						<u-icon name="arrow-down-fill" color="rgba(48, 116, 255, 1)" size="18"></u-icon>
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :eopts="eoptsTest" :chartData="chartsDataColumn7" :echartsH5="true"
						:echartsApp="true" />
				</view>
			</view>
		</view>
		<view v-show="current === 1">
			<view class="top_bg"></view>
			<view class="wrap">
				<u-swiper :list="list" height="320" indicator-pos="bottomRight" :title="true"></u-swiper>
			</view>
			<view>
				<view class="sub_title">考评综合得分</view>
				<view class="bottom_flex">
					<view class="ranking">
						<view class="right_font">
							<view class="name">排名</view>
							<view class="value">{{rankingObj ? rankingObj.typeRank :'-'}}</view>
						</view>
					</view>
					<view class="number">
						<view class="right_font">
							<view class="name">得分</view>
							<view class="value">{{rankingObj ? rankingObj.totalScore :'-'}}</view>
						</view>
					</view>
				</view>
				<view class="sub_title">我的待办</view>
				<view class="function_bg">
					<view class="function_one" v-for="(item, index) in todoArr" :key="index" @click="jump(item.path)">
						<image :src="iconUrl(item.icon)" mode=""></image>
						<view class="">{{ item.name }}</view>
					</view>
				</view>
				<view class="sub_title">工作台</view>
				<view class="function_bg">
					<view class="function_one" v-for="(item, index) in functionArr" :key="index"
						@click="jump(item.path)">
						<image :src="iconUrl(item.icon)" mode=""></image>
						<view class="">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<u-tabbar v-model="current" :list="listabc"></u-tabbar>
	</view>
</template>
<script>
	import {
		HomeList,
		HomeEchart,
		dictionary,
		HomeRanking
	} from "@/request/zdxm.js";
	export default {
		data() {
			var myDate = new Date();
			return {
				eoptsPie: {
					title: {
						text: "0",
						subtext: "总数(项)",
						left: "16%",
						top: "40%",
						textStyle: {
							fontSize: 24,
						},
						subtextStyle: {
							fontSize: 14,
							color: "rgba(142, 156, 179, 1)",
						},
					},
					color: [
						"rgba(248, 95, 120, 1)",
						"rgba(250, 173, 51, 1)",
						"rgba(31, 211, 183, 1)",
						"rgba(48, 116, 255, 1)",
					],
				},
				eoptsTest2: {
					yAxis: {
						name: "(万元)",
					},
				},
				eoptsTest1: {
					yAxis: {
						'nameTextStyle': {
							'padding': [0, 20, 0, 0]
						},
						name: "(亩/m²)",
					},
				},
				eoptsTest: {
					yAxis: {
						name: "(条)",
					},
				},
				columneopts: {
					legend: {
						show: true,
						position: "top",
						float: "right",
					},
				},
				chartsDataColumn1: {
					series: [{
						data: [{
								name: "预备",
								value: 0,
							},
							{
								name: "前期",
								value: 0,
							},
							{
								name: "在建",
								value: 0,
							},
							{
								name: "竣工",
								value: 0,
							},
						],
					}, ],
				},
				chartsDataColumn2: {
					categories: [
						"1",
						"2",
						"3",
						"4",
						"5",
						"6",
						"7",
						"8",
						"9",
						"10",
						"11",
						"12",
					],
					series: [{
							name: "计划投资",
							data: [],
							color: "rgba(48, 116, 255, 1)",
						},
						{
							name: "实际投资",
							data: [],
							color: "rgba(250, 173, 51, 1)",
						},
					],
				},
				chartsDataColumn3: {
					categories: [
						"1",
						"2",
						"3",
						"4",
						"5",
						"6",
						"7",
						"8",
						"9",
						"10",
						"11",
						"12",
					],
					series: [{
							name: "立项",
							data: [],
							color: "rgba(48, 116, 255, 1)",
						},
						{
							name: "完成",
							data: [],
							color: "rgba(250, 173, 51, 1)",
						},
					],
				},
				chartsDataColumn4: {
					categories: ["2017", "2018", "2019", "2020", "2021"],
					series: [{
							name: "正常",
							data: [],
							color: "rgba(31, 211, 183, 1)",
						},
						{
							name: "超前",
							data: [],
							color: "rgba(250, 173, 51, 1)",
						},
						{
							name: "滞后",
							data: [],
							color: "rgba(248, 95, 120, 1)",
						},
						{
							name: "完成",
							data: [],
							color: "rgba(48, 116, 255, 1)",
						},
					],
				},
				chartsDataColumn5: {
					categories: [
						"1",
						"2",
						"3",
						"4",
						"5",
						"6",
						"7",
						"8",
						"9",
						"10",
						"11",
						"12",
					],
					series: [{
							name: "征地",
							data: [],
							color: "rgba(250, 173, 51, 1)",
						},
						{
							name: "拆迁",
							data: [],
							color: "rgba(48, 116, 255, 1)",
						},
					],
				},
				chartsDataColumn6: {
					categories: [
						"1",
						"2",
						"3",
						"4",
						"5",
						"6",
						"7",
						"8",
						"9",
						"10",
						"11",
						"12",
					],
					series: [{
							name: "生成数",
							data: [],
							color: "rgba(250, 173, 51, 1)",
						},
						{
							name: "完成数",
							data: [],
							color: "rgba(48, 116, 255, 1)",
						},
					],
				},
				chartsDataColumn7: {
					categories: [
						"1",
						"2",
						"3",
						"4",
						"5",
						"6",
						"7",
						"8",
						"9",
						"10",
						"11",
						"12",
					],
					series: [{
							name: "生成数",
							data: [],
							color: "rgba(250, 173, 51, 1)",
						},
						{
							name: "完成数",
							data: [],
							color: "rgba(48, 116, 255, 1)",
						},
					],
				},
				todoArr: [{
						name: "待办",
						icon: "task01",
						path: "/pages/zdxm/todo/index",
					},
					{
						name: "逾期预警",
						icon: "task02",
						path: "/pages/zdxm/yqyj/index",
					},
					{
						name: "督查任务",
						icon: "task03",
						path: "/pages/zdxm/dcrw/index",
					},
				],
				functionArr: [{
						name: "项目管理",
						icon: "task04",
						path: "/pages/zdxm/xmgl/index",
					},
					{
						name: "提请协调",
						icon: "task05",
						path: "/pages/zdxm/tqxt/index",
					},
					{
						name: "征地拆迁",
						icon: "task06",
						path: "/pages/zdxm/zdcq/index",
					},
					{
						name: "登陆统计",
						icon: "task07",
						path: "/pages/zdxm/dltj/index",
					},
					{
						name: "节点清单",
						icon: "task08",
						path: "/pages/zdxm/jdqd/index",
					},
					{
						name: "绩效考核",
						icon: "task09",
						path: "/pages/zdxm/jxkh/index",
					},
				],
				list: [{
						image: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=102485346,1281740394&fm=26&gp=0.jpg",
						title: "昨夜星辰昨夜风，画楼西畔桂堂东",
					},
					{
						image: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3864510950,2494178616&fm=26&gp=0.jpg",
						title: "身无彩凤双飞翼，心有灵犀一点通",
					},
					{
						image: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3407715585,2095780879&fm=26&gp=0.jpg",
						title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
					},
				],
				listabc: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: "首页",
						customIcon: false,
					},
					{
						iconPath: "grid",
						selectedIconPath: "grid-fill",
						text: "工作台",
						customIcon: false,
					},
				],
				current: 0,
				homeObj: {},
				mytzShow: false,
				pickerType: null,
				mytzYear: myDate.getFullYear(),
				lxwcYear: myDate.getFullYear(),
				zdcqYear: myDate.getFullYear(),
				mydcYear: myDate.getFullYear(),
				myxtYear: myDate.getFullYear(),
				yearArr: [],
				rankingObj: {}
			};
		},
		onLoad() {
			this.dictionary();
			this.HomeList();
			this.mytzEchart();
			this.lxwcEchart();
			this.xmjdEchart();
			this.myzdEchart();
			this.mydcEchart();
			this.myxtEchart();
			this.HomeRanking()
		},
		methods: {
			HomeRanking() {
				HomeRanking().then((res) => {
					this.rankingObj = res.data.result.records[0]
				})
			},
			dictionary() {
				dictionary().then((res) => {
					var ret = res.data.result.in_database_date;
					for (let i in ret) {
						this.yearArr.push({
							label: ret[i],
							value: ret[i],
						});
					}
				});
			},
			mytzConfirm(e) {

				if (this.pickerType === 1) {
					this.mytzYear = e[0].value;
					this.mytzEchart();
				} else if (this.pickerType === 2) {
					this.lxwcYear = e[0].value;
					this.lxwcEchart();
				} else if (this.pickerType === 3) {
					this.zdcqYear = e[0].value;
					this.myzdEchart();
				} else if (this.pickerType === 4) {
					this.mydcYear = e[0].value;
					this.mydcEchart();
				} else if (this.pickerType === 5) {
					this.myxtYear = e[0].value;
					this.myxtEchart();
				}
			},
			showPicker(x) {
				this.pickerType = x;
				this.mytzShow = true;
			},
			// 每月协调任务生成数与完成数
			myxtEchart() {
				HomeEchart({
					graphType: "question",
					year: this.myxtYear,
				}).then((res) => {
					var ret = res.data.result.records;
					if (ret.length === 0) {
						this.chartsDataColumn7.series[0].data = [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
						];
						this.chartsDataColumn7.series[1].data = [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
						];
					} else {
						this.chartsDataColumn7.series[0].data = [
							ret[0].january,
							ret[0].february,
							ret[0].march,
							ret[0].april,
							ret[0].may,
							ret[0].june,
							ret[0].july,
							ret[0].august,
							ret[0].september,
							ret[0].october,
							ret[0].november,
							ret[0].december,
						];
						this.chartsDataColumn7.series[1].data = [
							ret[1].january,
							ret[1].february,
							ret[1].march,
							ret[1].april,
							ret[1].may,
							ret[1].june,
							ret[1].july,
							ret[1].august,
							ret[1].september,
							ret[1].october,
							ret[1].november,
							ret[1].december,
						];
					}
				});
			},
			// 每月督查任务生成数与完成数
			mydcEchart() {
				HomeEchart({
					graphType: "supervision",
					year: this.mydcYear,
				}).then((res) => {
					var ret = res.data.result.records;
					if (ret.length === 0) {
						this.chartsDataColumn6.series[0].data = [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
						];
						this.chartsDataColumn6.series[1].data = [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
						];
					} else {
						this.chartsDataColumn6.series[0].data = [
							ret[0].january,
							ret[0].february,
							ret[0].march,
							ret[0].april,
							ret[0].may,
							ret[0].june,
							ret[0].july,
							ret[0].august,
							ret[0].september,
							ret[0].october,
							ret[0].november,
							ret[0].december,
						];
						this.chartsDataColumn6.series[1].data = [
							ret[1].january,
							ret[1].february,
							ret[1].march,
							ret[1].april,
							ret[1].may,
							ret[1].june,
							ret[1].july,
							ret[1].august,
							ret[1].september,
							ret[1].october,
							ret[1].november,
							ret[1].december,
						];
					}
				});
			},
			// 每月征地与拆迁面积走势图
			myzdEchart() {
				HomeEchart({
					graphType: "relocate",
					year: this.zdcqYear,
				}).then((res) => {
					var ret = res.data.result.records;
					if (ret.length === 0) {
						this.chartsDataColumn5.series[0].data = [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
						];
						this.chartsDataColumn5.series[1].data = [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
						];
					} else {
						this.chartsDataColumn5.series[0].data = [
							ret[0].january,
							ret[0].february,
							ret[0].march,
							ret[0].april,
							ret[0].may,
							ret[0].june,
							ret[0].july,
							ret[0].august,
							ret[0].september,
							ret[0].october,
							ret[0].november,
							ret[0].december,
						];
						this.chartsDataColumn5.series[1].data = [
							ret[1].january,
							ret[1].february,
							ret[1].march,
							ret[1].april,
							ret[1].may,
							ret[1].june,
							ret[1].july,
							ret[1].august,
							ret[1].september,
							ret[1].october,
							ret[1].november,
							ret[1].december,
						];
					}
				});
			},
			// 项目进度情况走势图
			xmjdEchart() {
				HomeEchart({
					graphType: "itemProcess",
					// year: this.mytzYear
				}).then((res) => {
					var ret = res.data.result.records;
					var year = [];
					var yData1 = [];
					var yData2 = [];
					var yData3 = [];
					var yData4 = [];
					for (let i = 0; i < ret.length; i++) {
						year.push(ret[i].year);
						if (ret[i].type === "Normal") {
							yData1.push(ret[i].yearTotal);
						}
						if (ret[i].type === "Leading") {
							yData2.push(ret[i].yearTotal);
						}
						if (ret[i].type === "Lagging") {
							yData3.push(ret[i].yearTotal);
						}
						if (ret[i].type === "Complete") {
							yData4.push(ret[i].yearTotal);
						}
					}
					this.chartsDataColumn4.categories = Array.from(new Set(year));
					this.chartsDataColumn4.series[0].data = yData1;
					this.chartsDataColumn4.series[1].data = yData2;
					this.chartsDataColumn4.series[2].data = yData3;
					this.chartsDataColumn4.series[3].data = yData4;
				});
			},
			// 每月立项和完成情况
			lxwcEchart() {
				HomeEchart({
					graphType: "node",
					year: this.lxwcYear,
				}).then((res) => {
					var ret = res.data.result.records;
					if (ret.length === 0) {
						this.chartsDataColumn3.series[0].data = [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
						];
						this.chartsDataColumn3.series[1].data = [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
						];
					} else {
						this.chartsDataColumn3.series[0].data = [
							ret[0].january,
							ret[0].february,
							ret[0].march,
							ret[0].april,
							ret[0].may,
							ret[0].june,
							ret[0].july,
							ret[0].august,
							ret[0].september,
							ret[0].october,
							ret[0].november,
							ret[0].december,
						];
						this.chartsDataColumn3.series[1].data = [
							ret[1].january,
							ret[1].february,
							ret[1].march,
							ret[1].april,
							ret[1].may,
							ret[1].june,
							ret[1].july,
							ret[1].august,
							ret[1].september,
							ret[1].october,
							ret[1].november,
							ret[1].december,
						];
					}
				});
			},
			// 每月投资趋势图
			mytzEchart() {
				HomeEchart({
					graphType: "itemInv",
					year: this.mytzYear,
				}).then((res) => {
					var ret = res.data.result.records;
					if (ret.length === 0) {
						this.chartsDataColumn2.series[0].data = [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
						];
						this.chartsDataColumn2.series[1].data = [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
						];
					} else {
						this.chartsDataColumn2.series[0].data = [
							ret[0].january,
							ret[0].february,
							ret[0].march,
							ret[0].april,
							ret[0].may,
							ret[0].june,
							ret[0].july,
							ret[0].august,
							ret[0].september,
							ret[0].october,
							ret[0].november,
							ret[0].december,
						];
						this.chartsDataColumn2.series[1].data = [
							ret[1].january,
							ret[1].february,
							ret[1].march,
							ret[1].april,
							ret[1].may,
							ret[1].june,
							ret[1].july,
							ret[1].august,
							ret[1].september,
							ret[1].october,
							ret[1].november,
							ret[1].december,
						];
					}
				});
			},
			HomeList() {
				HomeList().then((res) => {
					// console.log(res.data.result.records[0])
					this.homeObj = res.data.result.records[0];
					this.chartsDataColumn1.series[0].data[0].value = this.homeObj.yuBei;
					this.chartsDataColumn1.series[0].data[1].value = this.homeObj.qianQi;
					this.chartsDataColumn1.series[0].data[2].value = this.homeObj.zaiJian;
					this.chartsDataColumn1.series[0].data[3].value = this.homeObj.junGong;
					this.eoptsPie.title.text =
						this.homeObj.yuBei +
						this.homeObj.qianQi +
						this.homeObj.zaiJian +
						this.homeObj.junGong;
				});
			},
			iconUrl(icon) {
				return require("../../static/images/ZDXM/home/" + icon + ".png");
			},
			jump(path) {
				uni.navigateTo({
					url: path,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.title_flex {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title_right {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.yearFont {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3074ff;
				margin-right: 10rpx;
			}
		}
	}

	.bottom_flex {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.ranking {
			width: 344rpx;
			height: 160rpx;
			background: url(../../static/images/ZDXM/home/ranking.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: row-reverse;
		}

		.number {
			width: 344rpx;
			height: 160rpx;
			background: url(../../static/images/ZDXM/home/number.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: row-reverse;
		}

		.right_font {
			width: 40%;
			height: 100%;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			flex-direction: column;

			.name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
				margin-bottom: 10rpx;
			}

			.value {
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #faad33;
			}
		}
	}

	.top_bg {
		width: 100%;
		height: 250rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: url(../../static/images/common/topBg.png) no-repeat;
		background-size: 100% 100%;
	}

	.wrap {
		margin: 30rpx 0;
	}

	.function_bg {
		width: 100%;
		background-color: white;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 20rpx 0;

		.function_one {
			width: 33.33%;
			display: flex;
			align-items: center;
			flex-direction: column;
			margin: 20rpx 0;

			image {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 15rpx;
			}
		}
	}

	.home_one {
		padding: 30rpx;
		background: #ffffff;
		box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
		border-radius: 8rpx;

		.title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #272b32;
			margin: 20rpx 0;
		}

		.flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid rgba(231, 233, 240, 1);

			.flex1 {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.top_font {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #3074ff;
				}

				image {
					width: 132rpx;
					height: 75rpx;
					margin: 20rpx 0 10rpx 0;
				}

				.bottom_font {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #8e9cb3;
				}
			}

			.flex11 {
				flex: 1;
				display: flex;
				// align-items: center;
				justify-content: center;
				border-right: 1rpx solid rgba(231, 233, 240, 1);

				.top_font {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #3074ff;
				}

				image {
					width: 60rpx;
					height: 60rpx;
				}

				.bottom_font {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(142, 156, 179, 1);
				}

				.left_view {
					width: 120rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.right_view {
					flex: 1;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #8e9cb3;
					}

					.value {
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #272b32;
					}
				}

				.center_view {
					flex: 1;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #8e9cb3;
					}

					.value {
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #272b32;
					}
				}
			}

			.flex11:last-child {
				border-right: none;
			}
		}
	}

	.charts-box {
		width: 100%;
		height: 400rpx;
		position: relative;

		.right_div {
			width: 40%;
			height: 90%;
			padding: 5% 0;
			position: absolute;
			right: 0;
			top: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.right_one:nth-child(1) {
				display: flex;
				align-items: center;

				.round {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: rgba(248, 95, 120, 1);
					margin-right: 20rpx;
				}
			}

			.right_one:nth-child(2) {
				display: flex;
				align-items: center;

				.round {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: rgba(250, 173, 51, 1);
					margin-right: 20rpx;
				}
			}

			.right_one:nth-child(3) {
				display: flex;
				align-items: center;

				.round {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: rgba(31, 211, 183, 1);
					margin-right: 20rpx;
				}
			}

			.right_one:nth-child(4) {
				display: flex;
				align-items: center;

				.round {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: rgba(48, 116, 255, 1);
					margin-right: 20rpx;
				}
			}

			.name {
				width: 100rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #8e9cb3;
			}

			.value {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #272b32;
				margin-left: 10rpx;
			}
		}
	}
</style>
